*{
	margin: 0;
	padding: 0;
}

body{
	background-color: #CF9FFF;
	width: 100%;
	overflow-x: hidden;   /* stop horizontal scroll */
    margin: 0;
    padding: 0;
	
}

body.no-vertical-scroll {
    overflow-y: hidden;
  }

.home-section1,
.home-section2 {
    width: 100%;                 /* replace 100vw */
    box-sizing: border-box;
}
.thumbnail-container-wrapper {
    max-width: 100%;             /* prevent fixed 820px from breaking layout */
}

.page {
  display: none;
}

.active-home {
  display: block;
}

.page.active {
  display: block;
}

.loading-screen {
	z-index: 9999;
    position: fixed;
	inset: 0;                 /* top, right, bottom, left = 0 */
	width: 100%;
	height: 100%;
	height: 100vh;
  height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: #f0f0f0;
    overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading{
	position: absolute;
	top: 50%;
  left: 42%;
  transform: translate(-50%, -50%);
}

#scroll-point{
	/* background-color: blue; */
}

/* Style the loading spinner */
.loading-spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
	position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 24px;
    margin-top: 80px;
	 position: absolute;
}

@font-face {
	font-family: Ordinary Notes;
	src: url('/fonts/ordinary-notes.woff') format('woff');
}

@font-face {
	font-family: Ordinary Notes Thin;
	src: url('/fonts/ordinary-notes-thin.woff') format('woff');
}

@font-face {
	font-family: Bragga;
	src: url('/fonts/bragga.woff') format('woff');
}

.fading-text {
  animation: fade 3s infinite;
}

@keyframes fade {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }

}